<template>
  <div id="game">
    <div>
      <form>
        <ul class="menu">
          <li>
            <label @click.stop="rebegin()">{{"主页"}}</label>
          </li>
          <li>
              <div class="selectBox" style="width: 400px;">
                <div class="selectBox_show" v-on:click.stop="arrowDown">
                  <p title="选择">{{unitName}}</p>
                </div>
              </div>
          </li>
        </ul>
      </form>
  </div>
    <div class="selectBox_list" v-show="isShowSelect"
         style="max-height: 240px; width: 398px; display: block;">
      <div class="selectBox_listLi" v-for="(item, index) in selectList" :key="item.key"
           @click.stop="select(item, index)">{{item.value}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GameFace',
  data () {
    return {
      isShowSelect: false,
      selectList: [
        { key: 0, value: '帮助' },
        { key: 1, value: '登录' },
        { key: 2, value: '注销' },
        { key: 3, value: '联系我们' }
      ],
      unitName: '设置'
    }
  },
  methods: {
    arrowDown () {
      this.isShowSelect = !this.isShowSelect
    },
    rebegin () {
      window.location.reload()
    },
    select (item, index) {
      switch (item.key) {
        case 0:
          this.$router.push('/help')
          break
        case 1:
          this.$router.push('/login')
          break
        case 2:
          break
        case 3:
          break
      }
    }
  }
}
</script>

<style scoped>
.selectBox_show {
  background-color: cornflowerblue;
}
ul {
  list-style: none;
}
.menu {
  display: flex;
  align-items: center;
  align-content: flex-end;
}
</style>
